<template>
  <div>
    <el-dialog
      title="在线设计"
      v-model="visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :fullscreen="true"
      :show-close="false"
    >
      <template #header>
        <div class="design-header">
          <div class="left">
            <i class="wft-icon-design" />
            <b>在线设计</b>
          </div>
          <div class="center"><h2>{{ appName }}</h2></div>
          <div class="right"><el-button :icon="Close" circle @click="closeDesign" /></div>
        </div>
      </template>
      <div class="design-content" :style="getHeight()">
        <AppGenerator v-if="visible && showAppGenerator" :appId @closeDialog="closeDialog" />
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { Close } from '@element-plus/icons-vue';
import Bus from '@/utils/bus'

const visible = ref(false)
const showAppGenerator = ref(false)
const appId = ref('')
const appName = ref('')

const init = async (id: string, name: string) => {
  appId.value = id
  appName.value = name
  visible.value = true
  nextTick(() => {
    showAppGenerator.value = true
  })
}

const closeDesign = () => {
  Bus.emit('closeDesign')
}

const closeDialog = () => {
  visible.value = false
}

const getHeight = () => {
  const height = window.innerHeight - 58 + 'px'
  return { height }
}

defineExpose({ init })
</script>
<style scoped>
.design-header {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  background-color: #f0f0f0;
  color: #086d6d;
  font-size: 18px;
}

.design-header .left {
  width: 15.5%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 15px;
  box-sizing: border-box;
}

.design-header .center {
  width: calc(67.5% - 50px);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}

.design-header .right {
  width: calc(17% + 50px);
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 15px;
  box-sizing: border-box;
}

.design-content {
  width: 100%;
  /* height: 853px; */
}

:deep(.el-dialog) {
  padding: 0;
  border-radius: 0;
}

:deep(.el-dialog__header) {
  height: 58px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #DCDFE6;
  box-sizing: border-box;
  padding-bottom: 0;
}

.wft-icon-design {
  font-size: 18px;
  font-weight: 900;
  margin-right: 8px;
}
</style>